<template>
  <div class="index">
    <question-search-button></question-search-button>
    <div class="menu" @click="showClick">
      <i class="iconfont icon-icon-test8"></i>
    </div>
    <!-- 弹出框 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '85%' }">
      <div class="content">
        <div class="title">
          <div class="left">我的频道</div>
          <div class="right" v-if="!flag" @click="flag = !flag">编辑</div>
          <div class="right" v-else @click="flag = !flag">完成</div>
        </div>
        <ul class="myList">
          <li
            :class="{ red: red === index2 }"
            @click="reduce(index2, ele.id)"
            v-for="(ele, index2) in userChannels"
            :key="index2"
          >
            {{ ele.name }}
            <i
              v-show="flag"
              v-if="index2 !== 0"
              class="iconfont icon-icon-test10 active"
              @click="del(index2, ele.id)"
            ></i>
          </li>
          <li class="a"></li>
          <li class="a"></li>
          <li class="a"></li>
          <li class="a"></li>
        </ul>
        <div class="recommend">
          频道推荐
        </div>
        <ul class="rmList">
          <li
            @click="addClick(index)"
            v-for="(item, index) in channels"
            :key="index"
          >
            {{ item.name }}
            <!-- <i class="iconfont icon-tianjia"></i> -->
          </li>
          <li class="a"></li>
          <li class="a"></li>
          <li class="a"></li>
          <li class="a"></li>
        </ul>
      </div>
    </van-popup>
    <!-- tabs标签栏 -->
    <van-tabs v-model="channel_id" @click="onClick" animated>
      <van-tab
        v-for="(item, index) in userChannels"
        :key="index"
        :name="item.id"
        :title="item.name"
      >
        <van-pull-refresh
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh(item.id)"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <myVanCell
              :list="listText"
              :dialog="dialog"
              ref="refCell"
            ></myVanCell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 反馈弹出框 -->
    <van-dialog v-model="isShow" closeOnClickOverlay :showConfirmButton="false">
      <van-cell-group v-if="showCell">
        <van-cell title="反馈垃圾内容" is-link @click="showCell = false">
          <template #icon>
            <i style="margin-right: 5px" class="iconfont icon-icon-test111"></i>
          </template>
        </van-cell>
        <van-cell title="不感兴趣" @click="dislikes">
          <template #icon>
            <i style="margin-right: 5px" class="iconfont icon-icon-test10"></i>
          </template>
        </van-cell>
        <van-cell title="拉黑作者" @click="black">
          <template #icon>
            <i style="margin-right: 5px" class="iconfont icon-shanchu1"></i>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group v-else>
        <van-cell arrow-direction="left" is-link @click="showCell = true" />
        <van-cell
          :title="item"
          v-for="(item, index) in Object.values(type)"
          :key="index"
          @click="report(index)"
        />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
import {
  channels,
  articles,
  userChannels,
  blacklists,
  articleReports,
  articleDislikes
  // addUserChannel,
  // delUserChannel
} from '@/api/index'
import { setLocal, getLocal } from '@/utils/Local'
import QuestionSearchButton from '@/components/QuestionSearchButton.vue'
import myVanCell from '@/components/myVanCell'
export default {
  name: 'Index',
  components: {
    QuestionSearchButton,
    myVanCell
  },
  data () {
    return {
      channels: [], // 全部频道
      userChannels: [], // 用户频道
      channel_id: 0, // 频道ID
      loading: false, // 上拉加载中
      isLoading: false, // 下拉加载
      finished: false, // 上拉加载完成
      listText: [], // 文章列表
      page: 1, // 总页数
      show: false, // 显示弹框
      flag: false,
      myList: [], // 用户频道列表
      rmList: [], // 推荐频道列表
      red: 0, // 选中样式
      isShow: false, // 显示遮罩层
      showCell: true, // 显示反馈
      type: {
        0: '其他问题',
        1: '标题夸张',
        2: '低俗色情',
        3: '错别字多',
        4: '旧闻重复',
        5: '广告软文',
        6: '内容不实',
        7: '涉嫌违法犯罪',
        8: '侵权'
      }
    }
  },
  methods: {
    // 点击频道
    onClick (id) {
      this.onRefresh(id)
    },
    // 弹出框
    dialog () {
      this.isShow = true
    },
    // 上拉加载
    async onLoad () {
      const res = await articles({
        channel_id: this.channel_id,
        timestamp: Date.now(),
        with_top: 0
      })
      this.listText.push(...res.data.results)
      this.loading = false
      if (res.data.results.length === 0) {
        this.finished = true
      }
    },
    // 下拉加载
    async onRefresh (id) {
      const res = await articles({
        channel_id: id,
        timestamp: Date.now(),
        with_top: 0
      })
      this.channel_id = id
      this.listText = res.data.results
      // console.log(this.listText)
      this.page = res.data.page
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 200)
    },
    // 点击弹出全部频道ID
    showClick () {
      this.show = true
    },
    // 点击新增频道
    addClick (index) {
      // if (!getLocal('token')) {
      this.userChannels.push(this.channels[index])
      this.channels.splice(index, 1)
      setLocal('userChannelsList', JSON.stringify(this.userChannels))
      // } else {
      //   addUserChannel()
      //     .then(res => {
      //       console.log(res)
      //     })
      //     .catch(() => {})
      // }
    },
    // 点击删除用户频道
    async del (index, id) {
      if (this.flag) {
        // if (getLocal('token')) {
        //   delUserChannel(id)
        //     .then(res => {
        //       console.log(res)
        //     })
        //     .catch(() => {})
        // } else {
        this.channels.push(this.channels[index])
        this.userChannels.splice(index, 1)
        setLocal('userChannelsList', JSON.stringify(this.userChannels))

        // 获取所有频道
        const res = await channels()
        this.channels = res.data.channels
        const _arrA = []
        this.userChannels.map(item => {
          _arrA.push(item.id)
        })
        const _arrB = []
        this.channels.map(item => {
          if (_arrA.indexOf(item.id) < 0) {
            _arrB.push(item)
          }
        })
        this.channels = _arrB
        // }
      }
    },
    // 点击用户频道
    reduce (index, id) {
      if (!this.flag) {
        this.red = index
        this.onRefresh(id)
        this.show = false
      }
    },
    // 拉黑
    async black () {
      this.$toast.loading()
      const res = await blacklists({ target: this.$refs.refCell[0].autId })
      if (res.message) {
        this.$toast.success('拉黑成功')
        this.isShow = false
        this.showCell = true
      }
    },
    // 举报用户
    async report (index) {
      const res = await articleReports({
        target: this.$refs.refCell[0].artId,
        type: index,
        remark: ''
      })
      if (res.message) {
        this.$toast.success('举报成功')
        this.isShow = false
        this.showCell = true
      }
      const _index = this.$refs.refCell[0].indexText
      this.listText.splice(_index, 1)
    },
    // 不感兴趣
    async dislikes () {
      const res = await articleDislikes({ target: this.$refs.refCell[0].artId })
      const _index = this.$refs.refCell[0].indexText
      this.listText.splice(_index, 1)
      this.$toast.success(res.message)
      this.isShow = false
      this.showCell = true
    }
  },
  async mounted () {
    // 获取用户频道
    if (getLocal('token')) {
      const res2 = await userChannels()
      this.userChannels = res2.data.channels
    } else {
      if (getLocal('userChannelsList')) {
        this.userChannels = JSON.parse(getLocal('userChannelsList'))
      } else {
        const res2 = await userChannels()
        this.userChannels = res2.data.channels
      }
    }
    // 获取所有频道
    const res = await channels()
    this.channels = res.data.channels
    const _arrA = []
    this.userChannels.map(item => {
      _arrA.push(item.id)
    })
    const _arrB = []
    this.channels.map(item => {
      if (_arrA.indexOf(item.id) < 0) {
        _arrB.push(item)
      }
    })
    this.channels = _arrB

    // 获取新闻列表
    this.onClick(this.channel_id)
  }
}
</script>

<style lang="less" scoped>
.index {
  position: relative;
  .menu {
    z-index: 1;
    position: absolute;
    top: 55px;
    right: 0;
    background-color: #fff;
    i {
      color: #ccc;
      font-size: 30px;
    }
  }
  .content {
    padding: 15px;
    height: 100%;
    .title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      border-bottom: 1px solid #ccc;
      text-align: center;
      font-size: 16px;
      .left {
        padding-top: 6px;
      }
      .right {
        height: 25px;
        width: 55px;
        font-size: 12px;
        text-align: center;
        // line-height: 25px;
        padding-top: 4px;
        border: 2px solid #ee1830;
        border-radius: 20px;
        color: #ee1830;
      }
    }
    .myList {
      display: flex;
      padding-top: 15px;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        position: relative;
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #e1e3e6;
        color: #666;
        font-size: 12px;
        margin-bottom: 6px;
        .active {
          position: absolute;
          font-size: 5px;
          font-weight: 900;
          top: -14px;
          right: -1px;
          color: red;
        }
      }
      .red {
        color: red;
      }
      .a {
        height: 0;
        border: none;
      }
    }
    .recommend {
      font-size: 16px;
      padding: 20px 0;
    }
    .rmList {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        position: relative;
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #e1e3e6;
        color: #666;
        font-size: 12px;
        margin-bottom: 6px;
        // i {
        //   position: absolute;
        //   font-size: 5px;
        //   font-weight: 900;
        //   top: -14px;
        //   right: -1px;
        //   color: #3296fa;
        // }
      }
      .a {
        height: 0;
        border: none;
      }
    }
  }
  .van-tabs {
    ::v-deep.van-tabs__wrap {
      margin-right: 30px;
    }
    ::v-deep.van-tab__pane {
      padding: 20px 15px;
    }
  }
}
</style>
